import { signIn, signOut, auth } from "auth"
import Link from 'next/link'


function SignIn({ provider, ...props }: any) {

  const SignIn = async () => {
    "use server"
    console.log(provider, 'provider')
    await signIn(provider)
  }
  return (
    <form action={SignIn}>
      < button {...props} > Sign In </button >
    </form>
  )
}

function SignOut(props: any) {

  const SignOut = async () => {
    "use server"
    await signOut()
  }
  return (
    <form action={SignOut} >
      <button {...props} >Sign Out</button>
    </form>
  )
}

export default async function Header() {
  const session = await auth()
  return (
    <header style={{ display: "flex", "justifyContent": "space-around" }}>
      {
        session?.user
          ? <span style={{ display: "flex", "alignItems": "center" }} > {session?.user.name} < SignOut /> </span>
          : <SignIn />
      }

      <Link href={`/AuthInfo/client`}>Client Components get Auth info</Link>
      <Link href={`/AuthInfo/server`}>Server Components get Auth info</Link>
    </header>
  )
}
